import React, { Component } from 'react'
import { Search } from 'antd-mobile'
import { TravelOutline, DownFill } from 'antd-mobile-icons'
import { getCityInfo } from 'api/city'

export default class SearchBox extends Component {
  state = {
    currentCity: '上海',
  }
  async componentDidMount() {
    const res = await getCityInfo()
    this.setState({
      currentCity: res,
    })
  }
  render() {
    return (
      <div className="search">
        <div className="searchCom">
          <span
            className="city"
            onClick={() => this.props.history.push('/city')}
          >
            {this.state.currentCity?.label} <DownFill></DownFill>
          </span>
          <Search placeholder="请输入小区或地址" />
        </div>
        <TravelOutline
          className="icon_travel"
          onClick={() => this.props.history.push('/map')}
        ></TravelOutline>
      </div>
    )
  }
}
